<!--
 * @Descripttion: 
 * @version: 
 * @Author: 高月飞
 * @Date: 2023-11-18 09:44:30
 * @LastEditors: 高月飞
 * @LastEditTime: 2023-11-21 23:47:55
-->
<template>
    <div class="center">
        <el-menu :default-active="InitRoute" mode="horizontal" menu-trigger="hover" background-color="#367eea"
            active-text-color="skyblue" class="el-menu-vertical-demo" text-color="#fff" router>
            <el-sub-menu v-for="item in  routesChild " :key="item.path" :index="item.path"
                @click="handleSubMenuClick(item)">
                <template #title>
                    <i :class="['iconfont', item.meta?.icon, 'iconStylus']"></i>
                    <span>{{ item.meta?.menu }}</span>
                </template>
                <el-menu-item v-for=" value  in  item.children " :key="value.path" :index="value.path"
                    @click="handleMenuItemClick(value.path)">
                    <el-icon>
                        <component :is="value.meta?.icon" />
                    </el-icon>
                    {{ value.meta?.menu }}
                </el-menu-item>
            </el-sub-menu>
        </el-menu>
    </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { children } from '@/router/routers';
interface IProps {
    setHomePage: (value: boolean) => void;
}
const { setHomePage } = defineProps<IProps>();

//去除首页
const routesChild = children.slice();
routesChild.splice(2, 1)



//导入路由
const route = useRoute()
const router = useRouter()
//计算路由
const InitRoute = computed(() => {
    return route.path ?? '/dashoard'
})
// 传输列表
const emit = defineEmits<{
    onRouterList: [data: string[]]
    onselectMenu: [data: string]
}>()
// const transferList = (data: any) => {
//     emit('onRouterList', data)
// }
const handleMenuItemClick = (value: string) => {
    setHomePage(true)
    emit('onselectMenu', value)
}
const handleSubMenuClick = (item: any) => {
    emit('onRouterList', item)
    if (item.children && item.children.length > 0) {
        const firstChildPath = item.children[0].path
        router.push({ path: firstChildPath })
    }
}
</script>

<style lang="scss" scoped>
.center {
    width: 100%;

}

.el-menu {
    height: 50px;
    width: 80%;
    margin: 0 auto;
    display: flex;
    justify-content: space-around;

    .el-menu-item {
        white-space: nowrap;
        text-overflow: unset;
        overflow: unset;
        width: auto;


        .el-sub-menu {
            width: 150px;
        }
    }
}

.iconStylus {
    margin-right: 5px;
}
</style>